<template>
  <div class="login">
    <div class="login-form">
      <h1>Agotoz</h1>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        label-width="120px"
        label-position="left"
        class="demo-ruleForm"
        size="default"
        status-icon>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            placeholder="Please input password"
            show-password />
          <!-- <el-input v-model="ruleForm.password" type="password" autocomplete="off"
            show-password /> -->
        </el-form-item>
      </el-form>
      <div class="submit">
        <el-button type="primary" size="default" @click.native="handleSubmit">登录
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
console.log(111111)
import { useStore } from '@/store'
import {useRouter} from 'vue-router'
import { ref, reactive } from 'vue'
const store = useStore()
const router = useRouter()
const ruleFormRef = ref();
const ruleForm = reactive({ username: null, password: null })

function handleSubmit() {
  store.dispatch('user/login', ruleForm).then(res => {
    console.log(res)
    if (res.code == 0) {
      console.log(res)
      router.push('/dashboard')
    }
  }).catch(err => {
    console.log(err, 'login-err')
  })
}

</script>

<style  scoped lang="scss">
.login {
  padding-top: 100px;
  .login-form {
    h1 {
      text-align: center;
    }
    box-sizing: border-box;
    // box-shadow: 1px 1px #3333;
    padding-top: 100px;
    width: 500px;
    height: 400px;
    margin: 0 auto 0;
    color: red;
  }
}
</style>